<template>
  <view class="header"></view>
  <view class="container">
    <view class="form">
      <uni-section title="精选产品" type="line">
        <!-- <view>精选产品</view> -->
        <scroll-view
          class="scroll-v"
          enableBackToTop="true"
          scroll-y="true"
          @scrolltolower="loadMore"
        >
          <view>
            <view v-for="(item, index) in funds" :key="index">
              <view
                class="uni-list-cell"
                hover-class="uni-list-cell-hover"
                @click="goFundInfo(item.fundId)"
              >
                <view class="uni-media-list">
                  <view class="record">
                    <view class="row1">
                      <view class="fundName">{{ item.fundName }}</view>
                      <view class="strategy">
                        <text class="strategyText">{{
                          item.strategyLevel1
                        }}</text>
                      </view>
                      <view class="strategy">
                        <text class="strategyText">{{
                          item.strategyLevel2
                        }}</text>
                      </view>
                    </view>
                    <view class="row2">
                      <view>
                        <view
                          :class="
                            item.nav > 0
                              ? 'redValue'
                              : item.nav < 0
                              ? 'greenValue'
                              : 'normalValue'
                          "
                        >
                          <text>{{ item.nav }}</text>
                        </view>
                        <view class="desc">
                          <view>净值({{ item.statisticDate.substr(-5) }})</view>
                        </view>
                      </view>
                      <view>
                        <view
                          :class="
                            item.yearIncomRate > 0
                              ? 'redValue'
                              : item.yearIncomRate < 0
                              ? 'greenValue'
                              : 'normalValue'
                          "
                        >
                          <text>{{ item.yearIncomRate }}</text>
                        </view>
                        <view class="desc">
                          <view>今年以来收益率</view>
                        </view>
                      </view>
                      <view>
                        <view
                          :class="
                            item.totalIncomRate > 0
                              ? 'redValue'
                              : item.totalIncomRate < 0
                              ? 'greenValue'
                              : 'normalValue'
                          "
                        >
                          <text>{{ item.totalIncomRate }}</text>
                        </view>
                        <view class="desc">
                          <view>成立以来收益率</view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view class="loading-more">
              <uni-load-more
                :status="status"
                :icon-size="16"
                :content-text="contentText"
              />
            </view>
          </view>
        </scroll-view>
      </uni-section>
    </view>
  </view>
</template>

<script>
import { getHandPickedFunds } from "@/apis/api";
export default {
  data() {
    return {
      funds: [],
      status: "more",
      pageSize: 10,
      pageNum: "",
      contentText: {
        contentdown: "上拉加载更多",
        contentrefresh: "加载中",
        contentnomore: "没有更多数据了",
      },
    };
  },
  onLoad() {
    this.getDatas();
  },
  methods: {
    getDatas() {
      setTimeout(() => {
        this.getFundList();
      }, 500);
    },
    getFundList() {
      if (this.pageNum && this.pageNum > 0 && this.status === "noMore") {
        return;
      }

      this.status = "loading";

      var param = {
        pageSize: this.pageSize,
      };

      if (this.pageNum && this.pageNum > 0) {
        param.pageNum = this.pageNum + 1;
      } else {
        param.pageNum = 1;
      }

      getHandPickedFunds(param)
        .then((res) => {
          var newItems = [];
          res.data.data.records.forEach((e) => {
            newItems.push(e);
          });
          this.funds = !this.pageNum ? newItems : this.funds.concat(newItems);
          if (newItems.length > 0) {
            this.pageNum = res.data.data.current;
          }

          if (res.data.data.current >= res.data.data.pages) {
            this.status = "noMore";
          }
        })
        .catch((err) => {
          console.log("err", err);
        })
        .finally(() => {
          if (this.status === "loading") {
            this.status = "more";
          }
        });
    },
    goFundInfo(fundId) {
      uni.navigateTo({
        url: `../fundInfo/fundInfo?fundId=${fundId}`,
      });
    },
    loadMore() {
      this.getDatas();
    },
  },
};
</script>

<style lang="scss">
@import "home.scss";
</style>
